import { defineComponent, PropType } from 'vue'
import './DataCard.css'

export interface DataCardProps {
  title: string
  value: string | number
  unit?: string
  icon?: string
  trend?: 'up' | 'down'
  trendValue?: string
  color?: string
}

export default defineComponent({
  name: 'DataCard',
  props: {
    title: {
      type: String,
      required: true
    },
    value: {
      type: [String, Number],
      required: true
    },
    unit: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: '📊'
    },
    trend: {
      type: String as PropType<'up' | 'down'>,
      default: undefined
    },
    trendValue: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: '#00d4ff'
    }
  },
  setup(props) {
    return () => (
      <div class="data-card" style={{ '--card-color': props.color }}>
        <div class="data-card__glow"></div>
        <div class="data-card__content">
          <div class="data-card__header">
            <span class="data-card__icon">{props.icon}</span>
            <span class="data-card__title">{props.title}</span>
          </div>
          <div class="data-card__body">
            <div class="data-card__value">
              {props.value}
              {props.unit && <span class="data-card__unit">{props.unit}</span>}
            </div>
            {props.trend && (
              <div class={`data-card__trend data-card__trend--${props.trend}`}>
                <span class="data-card__trend-icon">
                  {props.trend === 'up' ? '▲' : '▼'}
                </span>
                <span class="data-card__trend-value">{props.trendValue}</span>
              </div>
            )}
          </div>
        </div>
        <div class="data-card__border"></div>
      </div>
    )
  }
})
